import styled from 'styled-components'
import Controller from '../../component/Controller'
import Content from './Content'
import Header from '../../component/Header'
import { useCallback, useEffect, useState } from 'react'
import IconBg from '../../asserts/icon_bg.webp'
import { isIOS } from '../../utils/check'
import { wallet } from '../../service'


const Container = styled(Controller)`
    background-color: ${(prop) => prop.theme.background.normal};
    overflow: hidden;
`

const Box = styled.div`
    display: flex;
    flex-direction: column;
    min-height: 100%;
     /* min-height: calc(100% + 1px); // Keep scrolling enabled at all times to prevent closing the mini program when scrolling down. */
`

const Bottom = styled(Content)`
    flex: 1;
    margin-top: 1.875rem;
`

const Task: React.FC = () => {
    const [btcCount, setBtcCount] = useState(0)

    const fetchData = useCallback(async () => {
        const { success, data: info } = await wallet()
        if (!success || !info) {
            return
        }

        setBtcCount(Number(info.balance || 0))
    }, [])

    useEffect(() => {
        fetchData()
    }, [fetchData])
    return <Container
        hiddenSafeBottom={true}
        imagebackground={{
            image: IconBg,
            style: isIOS() ? {} : { position: 'fixed' } // TODO: why absolute will case some gesture problem in andriod
        }}
    >
        <Box>
            <Header
                btcCount={btcCount}
            />
            <Bottom onGetReward={() => fetchData()} />
        </Box>
    </Container>
}

export default Task